<template>
  <div class="home">
    <van-image
            cover
            :src="shuitou"
            style="margin:10px 0px;"
    />
    <van-field
            readonly
            clickable
            name="picker"
            :value="valueSport"
            label="运动类型"
            placeholder="点击选择运动类型"
            @click="showPickerSport = true"
    />
    <van-popup v-model="showPickerSport" position="bottom">
      <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirmSport"
              @cancel="showPickerSport = false"
      />
    </van-popup>

    <van-field
            readonly
            clickable
            type="datetime"
            name="datetimePicker"
            :value="valueStart"
            label="开始时间"
            placeholder="点击选择开始时间"
            @click="showPickerStart = true"
    />
    <van-popup v-model="showPickerStart" position="bottom">
      <van-datetime-picker
              type="time"
              @confirm="onConfirmStart"
              @cancel="showPickerStart = false"
      />
    </van-popup>
    <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="valueEnd"
            label="结束时间"
            placeholder="点击选择结束时间"
            @click="showPickerEnd = true"
    />
    <van-popup v-model="showPickerEnd" position="bottom">
      <van-datetime-picker
              type="time"
              @confirm="onConfirmEnd"
              @cancel="showPickerEnd = false"
      />
    </van-popup>

    <van-field name="uploader" label="文件上传">
<!--      image/*,video/*   10M=10 * 1024 * 1024  这里的单位bype-->
      <template #input>
        <van-uploader v-model="uploader" :max-count="5"  :max-size="10 * 1024 * 1024" @oversize="onOversize" accept="*" 	:after-read="afterRead"
                      :before-read="beforeRead"/>
      </template>
    </van-field>

    <van-field
            v-model="content"
            rows="1"
            autosize
            label="心得"
            type="textarea"
            placeholder="请输入心得"
    />

    <van-button type="primary" size="large" @click="handleDaka">提交打卡记录</van-button>
  </div>
</template>
<script>
  import upLoaderImg from "../../utils/upLoader";
  import * as userApi from '@/api/user';
  export default {
    data() {
      return {
        valueSport: '',
        valueStart: '',
        valueEnd: '',
        columns: ['跑步', '篮球', '足球', '跳绳','爬山','游泳','健身','羽毛球', '其他'],
        showPickerSport: false,
        showPickerStart: false,
        showPickerEnd: false,
        uploader: [],
        content: [],
        fileUploadList: [],
        shuitou:require('../../assets/activity.jpg'),
        image1: '',
        image2: '',
        image3: '',
        image4: '',
        image5: '',
      };
    },
    methods: {
      onConfirmSport(value) {
        this.valueSport = value;
        this.showPickerSport = false;
      },
      onConfirmStart(time) {
        this.valueStart = time;
        this.showPickerStart = false;
      },
      onConfirmEnd(time) {
        this.valueEnd = time;
        this.showPickerEnd = false;
      },
      onOversize(file) {
        console.log(file);
        this.$toast('文件大小不能超过 10M');
      },
      handleDaka(){
        let requestParams = {
          type: this.valueSport, // 运动类型
          startTime: this.valueStart, // 开始时间
          endTime: this.valueEnd, // 结束数据
          content: this.content // 心得
        }
          if(this.valueSport == ''){
              this.$toast("请选择运动类型");
              return
          }else if(this.valueStart == '' || this.valueStart == undefined) {
              this.$toast("请选择开始时间");
              return
          }else if(this.valueEnd == '' || this.valueEnd == undefined) {
              this.$toast("请选择结束时间");
              return
          }else if(this.fileUploadList.length == 0){
              this.$toast("请至少上传一张图片");
              return
          }
        this.fileUploadList.forEach((item,i) =>{
          requestParams['image'+(i+1)]=item.url
        })
        userApi.saveClock(requestParams).then(res =>{
          if(res.code === 0){
            this.$toast('打卡成功');
          }else{
            this.$toast(res.msg);
          }
        }).catch(err =>{
          console.log(err)
        }).finally(() => {
          //console.log('无论正确错误，都会执行')
        })
      },
      beforeRead (file) {	//上传之前校验
        console.log('文件的大小:'+file.size);
        return true
      },
      async afterRead (file) {	//文件读取完成后的回调函数
        let uploadImg = await upLoaderImg(file.file)//使用上传的方法。file.file
        this.fileUploadList.push({url:uploadImg.url})
      }
    },
  };
</script>